<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p v-for="item in items">{{item}}</p>
      <p v-for="(item,index) in items">{{index}} ----- {{item}}</p>

      <p v-for="item in items2">名字：{{item.name}} 年龄:{{item.age}}</p>
      <p v-for="(item,index) in items2">
        {{index}}----名字：{{item.name}} 年龄:{{item.age}}
      </p>

      <p v-for="(value,name,index) in myobj">
        {{index}}----属性名:{{name}} 属性值:{{value}}
      </p>
    </div>

    <script src="../lib/vue.js"></script>

    <script>
      new Vue({
        el: '#app',
        data: {
          items: ['a', 'b', 'c'],
          items2: [
            { name: 'abc', age: 18 },
            { name: 'def', age: 19 },
            { name: 'xxx', age: 15 },
            { name: 'yyy', age: 13 },
          ],
          myobj: {
            age: 18,
            gender: true,
          },
        },
      })
    </script>
  </body>
</html>
